<template>
  <div class="p_classify_page">
    <div class="common_form_search">
      <el-form
        :inline="true"
        :model="searchForm"
      >
        <el-form-item label="分类名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入分类名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.status"
            placeholder="全部"
            clearable
          >
            <el-option label="显示" value="1"></el-option>
            <el-option label="隐藏" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >查询</el-button>
          <el-button
            size="small"
            @click="reset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right:15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
      <el-button
        v-if="$hasMethod('#add')"
        size="small"
        class="add-btn"
        @click="openAddDialog()"
        icon="el-icon-plus"
      >添加推广分类</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="70"
          align="center"
        />
        <el-table-column
          align="center"
          label="排序"
          width="80"
        >
          <template slot-scope="scope">
            <span v-if="!$hasMethod('#sort')">{{scope.row.sort}}</span>
            <el-input
              v-else
              oninput="value=value.replace(/[^\d]/g,'')"
              maxLength='9'
              v-model="scope.row.sort"
              @change="changeSort(scope.row.id, scope.row.sort)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="分类名称"
          align="center"
        />
        <el-table-column
          prop="title"
          label="标语"
          align="center"
        />
        <el-table-column
          prop="status"
          label="状态"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="$hasMethod('#enable')"
              class="pointer"
              :type="scope.row.status == 1 ? 'success' : 'danger'"
              @click="changeStatus(scope.row.id, scope.row.status)"
            >{{ scope.row.status == 1 ? "显示" : "隐藏" }}</el-tag>
            <el-tag
              v-else
              :type="scope.row.status == 1 ? 'success' : 'danger'"
            >{{ scope.row.status == 1 ? "显示" : "隐藏" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasMethod('#edit')"
              @click="openAddDialog(scope.row)"
              type="primary"
              size="mini"
            >编辑</el-button>
            <el-button
              v-if="$hasMethod('#delete')"
              @click="removeItem(scope.row.id)"
              type="danger"
              size="mini"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <custom-page
        ref="customPage"
        :total="total"
        @getList="getList"
      ></custom-page>
    </div>
    <add-dialog
      ref="addDialog"
      :edit-item="editItem"
      @getList="getList"
    ></add-dialog>
  </div>
</template>

<script>
import customPage from "@/components/customPage";
import addDialog from "./add";
import { h5PromotionCateList, addOrEditH5PromotionCate, delH5PromotionCate } from "@/api/recommend";
export default {
  components: { customPage, addDialog },
  data() {
    return {
      searchForm: {
        name: '',
        status: ''
      },
      total: 0,
      tableData: [],
      editItem: null
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 删除
    removeItem(id) {
      this.$confirm('您确定要删除推广分类吗？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        delH5PromotionCate(id).then(res => {
          this.getList(true);
        });
      }).catch(() => { });
    },
    // 显示/隐藏
    changeStatus(id, status) {
      let tip = "", title = "";
      if (status == 1) {
        tip = "您确定要隐藏推广标签吗？";
        title = "隐藏";
      } else {
        tip = "您确定要显示推广标签吗？";
        title = "显示";
      }
      this.$confirm(tip, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        addOrEditH5PromotionCate({
          id,
          status: status == 2 ? 1 : 2
        }).then(res => {
          this.getList(true);
        })
      }).catch(() => { });
    },
    // 更改排序
    changeSort(id, val) {
      addOrEditH5PromotionCate({
        id: id,
        sort: val
      }).then(res => {
        this.getList(true);
      })
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage;
      if (!flag) {
        this.tableData = [];
      }
      h5PromotionCateList({
        page,
        pageSize,
        ...this.searchForm
      }).then(res => {
        this.tableData = res.data || [];
        this.total = res.total;
      })
    },
    search() {
      this.$refs.customPage.page = 1;
      this.getList();
    },
    reset() {
      this.searchForm = {
        name: '',
        status: ''
      };
      this.$refs.customPage.page = 1;
      this.getList();
    },
    openAddDialog(val) {
      this.editItem = val || null;
      this.$refs.addDialog.dialogVisible = true;
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
